<template>
  <el-card class="box-card">
    <div v-if="!!customer">
      <a href="https://mp.weixin.qq.com/s/wCxMnzMbOlButBQAE-W4vA" class="imgContent">
        <img src="../../assets/item.jpeg" width="100%" height="200"/>
        <p>我是访客，操作指引</p>
      </a>
      <router-link tag="li" :to="isUserInfo ? '/subcribe' : '/userSubcribe'" class="textItem">
        <p>我要预约</p>
        <img src="../../assets/item3.png" alt="logo">
      </router-link>
      <router-link tag="li" to="/detail?appointmentId=home" class="textItem">
        <p style="border-bottom: none;">预约凭证</p>
        <img src="../../assets/item4.png" alt="logo">
      </router-link>
    </div>
    <div v-else>
      <a href="https://mp.weixin.qq.com/s/fM-1iuIil-XDLIbHsSMqCg" class="imgContent">
        <img src="../../assets/item.jpeg" width="100%" height="200"/>
        <p>我是员工，操作指引</p>
      </a>
      <router-link tag="li" to="/createStaff" class="textItem">
        <p>员工绑定</p>
        <img src="../../assets/item1.png" alt="logo">
      </router-link>
      <router-link tag="li" to="/toexa" class="textItem">
        <p style="border-bottom: none;">预约信息</p>
        <img src="../../assets/item2.png" alt="logo">
      </router-link>
    </div>
  </el-card>
</template>

<script>
import { fetchGet, fetchPost } from '../../util';
export default {
  data() {
    return {
      customer: this.$route.params.role === 'staff' ? false : true,
      isUserInfo: sessionStorage.getItem("userInfo") || false,
    }
  },
  mounted() {
   //sessionStorage.setItem('token','eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI1NjA1NDRhMmM5Yzg0MTU1YTRhZDRmNzMxNmE3MWE0YiIsInN1YiI6IntcImF2YXRhclwiOlwiaHR0cDovL3N4YmV0eC5jbi9wcm9maWxlL3VwbG9hZC8yMDIxLzA4LzAyLzgwMmM1YzNhLTIwZDAtNGE4ZC1hZThlLWVjNmI4MDI0NjA5MC5qcGdcIixcImNyZWF0ZVRpbWVcIjoxNjI3ODkwMjk3MDAwLFwiY3VzdG9tZXJJZFwiOlwiNTYwNTQ0YTJjOWM4NDE1NWE0YWQ0ZjczMTZhNzFhNGJcIixcImRlcGFydG1lbnRcIjpcIuS4iealvFwiLFwiZW50ZXJcIjowLFwiZ3JvdXBpbmdJZFwiOlwiN1wiLFwiaGVhZFBvcnRyYWl0XCI6XCJodHRwczovL3RoaXJkd3gucWxvZ28uY24vbW1vcGVuL3ZpXzMyL2dyRmNOVFdxVlh3bEU1aWNKOGlhME1mdjdXaWJVOEI1d0ttN05Bc3hPUkZpYkNBcXZ5UnVpY1B2NEpleGliWXQ3RkFaT3hSSUwyQjJIaWNYMUVrOUlUTzVPWmliRXcvMTMyXCIsXCJoZWFsdGh5SW1nZVwiOlwiXCIsXCJoZWFsdGh5TnVtYmVyXCI6XCJcIixcImlkZW50aWZpY2F0aW9uXCI6XCIxXCIsXCJpc1JlY2VpdmVcIjoxLFwiaXNXb3JrXCI6XCIwXCIsXCJuaWNrTmFtZVwiOlwi6KGNXCIsXCJvcGVuaWRcIjpcIm82RzBtNVhpVnlJbVJDQ3ZmbldlWWdncEFJS2dcIixcIm9wZW5pZHNcIjpcIm9GYUZoNnQ3UGR0VWRhQ3VQVEdmNlhJNXNpU1lcIixcIm91dHNcIjowLFwicGFyYW1zXCI6e30sXCJwb3N0XCI6XCLokKXkuJrljoVcIixcInB1c2hJZFwiOlwib0ZhRmg2dDdQZHRVZGFDdVBUR2Y2WEk1c2lTWVwiLFwicmVhbE5hbWVcIjpcIuiwoueZu-WzsFwiLFwic2V4XCI6XCIxXCIsXCJzdGF0dXNcIjpcIjFcIixcInRlbFwiOlwiMTg1OTE5OTA5MzVcIixcInVuaW9uaWRcIjpcIm83ajlwNXRKeGhVOTdRQm9qeHZGamx2N19oZmdcIixcInVwZGF0ZVRpbWVcIjoxNjI4NTk1MTQ4MDAwfSIsImlzcyI6InVzZXIiLCJpYXQiOjE2MzE5Mjk0MDd9.yh50KzNY7mZsVvLCRsrWPV0YgGDQDdNJKGJGW0dD_xQ')
    if(this.$route.query.code&&!sessionStorage.getItem('token')){
      fetchPost(`/api/login/getOpenids`,{
        code: this.$route.query.code
      }).then(data => {
        if(data.code === 0){
          let token = data.data.token;
          sessionStorage.setItem('token',token);
          sessionStorage.setItem('customerId',data?.data?.customer?.customerId);
          this.getUserInfo();
        }
      })
    }
  },
  methods: {
    getUserInfo() {
       fetchGet(`/api/customerAppointment/selByOpenid`).then(data=>{
        if(data.code === 0 && data.data) {
          sessionStorage.setItem("userInfo",JSON.stringify(data.data));
          this.isUserInfo = true;
        }
      })
    }
  }
}
</script>

<style scoped>
  .box-card{
    padding-bottom: 6px;
  }
  .box-card img{
    background-size: cover;
  }
  .imgContent{
    position: relative;
  }
  .imgContent p{
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    bottom: 16px;
    left: 16px;
  }
  .box-card .textItem{
    display: flex;
    align-items: center;
    padding-right: 15px;
  }
  .box-card .textItem p{
    font-size: 16px;
    line-height: 64px;
    flex: 1;
    margin: 0 15px;
    font-weight: 400;
    border-bottom: 1px solid #e6e7e9;
  }
  .box-card .textItem img{
    width: 53px;
    height: 53px;
  }
  .box-card .el-card__body{
    padding: 0;
  }
</style>
